// 默认vue-cli将webpack配置项隐藏了起来
// 可通过vue.config.js进行webpack修改
module.exports = {
    // vue开发阶段自动打开项目，并且配置
    devServer:{
        port:8080,
        open:true
    },
    // 为开发模式与发布模式指定不同的打包入口文件
    // 开发模式的入口文件为 src/main-dev.js
    // 发布模式的入口文件为 src/main-prod.js

    // 可通过chainWebpack或configureWebpack修改默认的webpack配置
    // 1.chainWebpack通过链式编程形式，修改webpack配置
    // 2.configureWebpack通过操作对象的形式，来修改默认的webpack配置
    chainWebpack: config => {
        // when()函数判断当前是开发阶段还是发布阶段
        config.when(process.env.NODE_ENV === 'production', config => {
            // entry()自动生成入口文件, clear()清除默认入口文件, add()添加自定义入口文件
            config.entry('app').clear().add('./src/main-prod.js');
            // 通过 externals 加载外部 CDN 资源 优化项目体积，如果不利用CDN优化体积，vue脚手架利用webpack打包出来的第三方库js文件会特别大，从而降低页面加载性能

            // 也只有项目发布阶段，才需要用到CDN优化第三方js体积
            // 在 externals 中定义的第三方库，webpack不会对其集中打包
            // externals 中定义的第三方，会在全局html中进行查找
            config.set('externals', {
                // 前面为库官网名字：后面为库的使用名字
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
            // 处理router重复而发生冲突的问题，开发阶段设置为false，发布阶段设置为true，从而解决冲突问题
            // vue配置文件设置按需开发模式或发布模式，判断是否导入CDN资源
            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })
        });
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        });
    }
}